.rest_container{
    width: 100%;
}



/* 标题 固定在头部， */
.rest_container .title{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 2.1em;
    line-height: 2.1em;
    font-size: 1.5em;
    font-weight: 500;
    color: white;
    background-color: #0195FF;
    text-align: center;
    z-index: 999;

}

/* 餐馆列表，由于上面标题是固定的、底部导航也是固定的，所以需要通过 margin 预留出来空白位置 */
.rest_container .restaurants{
    margin: 4em 0 45px 0 ;
   
    width: 100%;
    
}

.rest_container .restaurants .restaurant{
    display: flex;
    padding: 20px 20px;
    border-bottom: solid 0.2px grey;
}
.rest_container .restaurants .restaurant .pic{
    position: relative;
    width: 30%;
    /* background-color: #0195FF; */
}

.rest_container .restaurants .restaurant  .info {
    flex-grow: 1;
    margin-left: 30px;
}

.rest_container  .restaurant .pic img{
    width: 100%;
    min-height: 100px;
    z-index: -10;
} 

/* size 表示有上交数字的div大小尺寸，用于计算圆角、靠右、靠上的位置 */
.rest_container  .restaurant .pic .dot{
    --size:1.8em;
   
    width: var(--size);
    height: var(--size);
    position: absolute;
    right: calc(0px - var(--size) / 2);
    top:  calc(0px - var(--size) / 2);
    line-height: var(--size);
    text-align: center;
    font-size: 1em;
    font-weight: 500;
    color: white;
    background-color: red;
    border-radius: 50%;
}
.rest_container  .restaurant .info .name{
    height: 2em;
    line-height: 2em;
    font-size: 1.2em;
    color: black;
    font-weight: 600;
}
.rest_container  .restaurant .info .price_introduce{
    margin: 10px 0 ;
    color: rgb(148, 143, 143);
}
.rest_container  .restaurant .info .product_introduce{
    color: rgb(148, 143, 143);
    /* font-weight: 500; */
}

/* 底部导航  开始 tabs */
 .tabs {
    position: fixed;
    width: 100%;
    height: 4em;
    padding-top: 2px;
    bottom: 0;
    /* background-color: azure; */
    display: flex;
    justify-content: space-between;
    border-top: solid 0.5px rgb(196, 193, 193);
    background-color: rgba(255, 255, 255,1);

}

 /** 设置30% 宽度，当剩余有空间的时候 flex-grow: 1; 允许拉伸 这样可以平均分配*/
.tabs .tab {
    width: 30%;
    height: 100%;
    flex-grow: 1;
    color: #96959A !important;
    font-size: 1.25em;
    text-align: center;
    cursor: pointer;
}
.tabs .tab i{
    font-size: 1.5em !important;
}

/* 当前激活的状态  */
.tabs .active .caption , .tabs .active i {
    color: #0195FF !important;
    font-weight: 500 !important;
}

 /* 底部导航  结束 tabs */